<template>
 <div>
    <el-dialog title="加入项目" :visible.sync="dialogVisible" :fullscreen="true" :before-close="handleClose" append-to-body>
      <el-form  :inline="true"  ref="dataForm" size="mini" :model="temp" label-width="150px" >
        <el-form-item label="候选人" prop="title" class="form-item-full">
          <span>{{candidate_name_arr_str}}</span>
        </el-form-item> 
        <el-form-item label="进展中" prop="title" class="form-item-full">
          <el-select
            v-model="project_id"
            filterable
            collapse-tags
            placeholder="请选择"
            style="width: 400px"
            >
            <el-option
              v-for="item in projectOptions"
              :key="item.id"
              :label="item.project_name"
              :value="item.id">
              <span style="float: left">{{ item.project_name }}({{ item.company_name }})</span>
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">{{$t('table.cancel')}}</el-button>
        <el-button  type="primary" @click="createData">{{$t('table.confirm')}}</el-button>
      </div>
    </el-dialog>
 </div>
</template>
<script>
import API from '@/utils/backend_api'
export default {
  name: 'candidateProject',
  props: {
    data: {
      type: Array,
      default: [] // 这样可以指定默认的值
    },
    visible: {
      type: Boolean,
      default: false // 这样可以指定默认的值
    },
    report: {
      type: Boolean,
      default: false // 这样可以指定默认的值
    },
  },
  data() {
    return {
      candidate_name_arr_str: '',
      projectOptions: [],
      temp: {},
      project_id: '',
      dialogStatus: '',
      dialogVisible: false
    }
  },
  filters: {
  },
  created() {
  },
  watch: {
    data: {
      handler(newValue, oldValue) {
        this.project_id = ''
        if (newValue && newValue.length > 0) {
          const arr = []
          newValue.map(item => {
            arr.push(item.name)
          })
          this.candidate_name_arr_str = arr.join(',')
          API.project.live_brief().then(response => {
            this.projectOptions = response.data
          })
        }
      },
      deep: true
    },
    visible: function(val, oldVal) {
      console.log('当前值为：' + val, '旧值为：' + oldVal)
      this.dialogVisible = val
    }
  },
  methods: {
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (this.data && this.data.length === 1) {
          API.candidate.cv(this.data[0].id, this.project_id).then((response) => {
            if (this.report) {
              this.$emit('closeDialog', { type: 'report_success', data: response.data })
            } else {
              this.$emit('closeDialog', { type: 'project_success', data: response.data })
            }
            
          })
        } else if (this.data && this.data.length > 1) {
          const ids = this.data.map((item) => item.id)
          API.candidate.cvs(ids, this.project_id).then((response) => {
            this.$emit('closeDialog', { type: 'batch_project_success', data: response.data })
          })
        }
      })
    },
    handleCancel() {
      this.$emit('closeDialog', { type: 'cancel', data: {}})
    },
    handleClose(done) {
      this.$emit('closeDialog', { type: 'cancel', data: {}})
    }

  }
}
</script>
<style scoped>
  .form-row {
    display: block;
  }
  .form-item {
    width: 40%
  }

  .form-item-full {
    width: 100%
  }
  .form-content{
    overflow:hidden;
    border: 1px solid #ddd;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    box-sizing: content-box;
    width: 80%;
    margin-left:5%;
  }
  .form-header {
    height: 40px;
    line-height: 15px;
    color: #676a6c;
    background-color: #F9F9F9;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    border: 1px solid #ddd;
  }
  .form-table-border{
    margin: 1px 1px 1px 1px;
    border: 1px solid #ddd;
  }
  .form-header-button {
    float: right;
    margin: 0.3em 1em 0;
  } 
  .form-header-title{
    float: left;
    margin: 1.1em 1em 0.2em;
  }
  .select-item {
    display: inline-block;
    vertical-align: middle;
    width: 200px;
  }
</style>

